<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div>
          <div class="treeArea">
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>
            <el-tree ref='tree'
                     v-loading="loading"
                     :data="treeData"
                     show-checkbox
                     @check-change="checkChange"
                     :props="defaultProps"
                     :expand-on-click-node='false'
                     :filter-node-method="filterNode"
                     node-key="id"
                     :default-checked-keys="treeDataSelect"
                     class="filter-tree"
                     :highlight-current='true'
                     :default-expand-all='true'></el-tree>
          </div>
          <el-row :gutter="5">
            <el-col style="text-align: center; border-top:1px solid #e6e6e6; padding-top:20px; margin-top:10px;">
              <el-button size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
              <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
  </div>
</template>

<script>
import {
  selectMenuTree,
  hasSelectPri,
  batchInsertItem
} from '@/api/systemManage/roleManagementRoleEdit'
export default {
  name: 'powerRole',
  components: {},
  data() {
    return {
      loading: false,
      treeData: [],
      treeDataSelect: [],
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      oldMenuIdArr: [],
      listQuery: {
        condition: {
        },
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'roleId'
        }]
      },
      rowId: ''
    }
  },
  created() {
    this.listQuery.roleId = this.$route.params.rowId
    hasSelectPri(this.listQuery).then(response => {
      response.data.data.records.forEach((item, index) => {
        this.treeDataSelect.push(item.priId)
      })
    })
    this.loading = true
    selectMenuTree({ orgId: this.$route.params.id, userId: this.$store.getters.userid }).then(response => {
      this.treeData = response.data.data
      this.loading = false
    })
  },
  methods: {
    checkChange(data, checked, indeterminate) {
      var treeData = data
      var keys = this.$refs.tree.getCheckedKeys()
      if (treeData.children.length > 0) {
        if (checked) {
          // 添加操作
          treeData.children.forEach((item, index) => {
            if (keys.indexOf(item.id) === -1) {
              keys.push(item.id)
            }
          })
          this.$refs.tree.setCheckedKeys(keys)
          
        } else {
          // 删除操作
          treeData.children.forEach((item, index) => {
           if (keys.indexOf(item.id) >= -1) {
              
              keys.indexOf(item.id)== -1
             
             }
           })
          this.$refs.tree.setCheckedKeys(keys)
          
        }
      }
    },
    hasSelectPriData() {

    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    editTree() {
      selectMenuTree({ orgId: this.$route.params.id, userId: this.$store.getters.userid }).then(response => {
        this.treeData = response.data.data
      })
    },
    saveData() {
      const insertArr = []
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      console.log(checkedKeys)
      for (const temp of checkedKeys) {
        const input = {}
        input.priId = temp
        insertArr.push(input)
      }
      var search = {
        insertArr: insertArr,
        roleId: this.$route.params.rowId
      }
      batchInsertItem(search).then(response => {
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.$router.push({ name: 'roleManagement' })
      })
    },
    closeSelf() {
      this.$router.push({ name: 'roleManagement' })
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>

<style scoped>
.treeArea {
  padding-top: 10px;
  max-height: 66vh;
  overflow-y: auto;
}
</style>
